<template>
  <a-drawer v-model:open="visible" @close="onClosed">
    <span>Antd Drawer</span>

    <div style="flex: auto">
      <a-button @click="okClick"> 确定 </a-button>
      <a-button @click="cancelClick"> 取消 </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue'

const visible = ref(true)
const emit = defineEmits(['ok', 'cancel', 'closed'])

const onClosed = () => {
  emit('closed')
  console.log('closed in dialog')
}

const okClick = () => {
  emit('ok')
  visible.value = false
}

const cancelClick = () => {
  emit('cancel')
  visible.value = false
}

onUnmounted(() => {
  console.log('unmounted in dialog')
})
</script>
